<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}工时工具{% endblock %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        success: '#10B981',
                        warning: '#F59E0B',
                        danger: '#EF4444',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
            }
            .btn-primary:disabled {
                @apply bg-gray-400 cursor-not-allowed hover:bg-gray-400 hover:shadow-md transform-none;
            }
            .card {
                @apply bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl;
            }
            .dashboard-card {
                @apply bg-white rounded-xl shadow-md p-4 transition-all duration-300 hover:shadow-lg;
            }
            .file-info {
                @apply flex items-center p-4 bg-gray-50 rounded-lg border border-gray-200 transition-all duration-300;
            }
            .nav-link {
                @apply px-4 py-2 rounded-lg transition-all duration-200 text-gray-700 hover:bg-primary/10 hover:text-primary;
            }
            .nav-link.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            /* 公告滚动相关样式 */
            .announcement-container {
                @apply flex-1 overflow-hidden relative;
            }
            .announcement-scroll {
                @apply whitespace-nowrap text-gray-700 text-sm;
                animation: scroll-left 25s linear infinite;
            }
            .announcement-icon {
                @apply text-primary mr-2;
            }
            @keyframes scroll-left {
                0% {
                    transform: translateX(100%);
                }
                100% {
                    transform: translateX(-100%);
                }
            }
            .announcement-scroll:hover {
                animation-play-state: paused;
            }
            /* 公告弹窗样式 */
            .announcement-modal {
                @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300;
            }
            .announcement-modal.show {
                @apply opacity-100 pointer-events-auto;
            }
            .modal-content {
                @apply bg-white rounded-xl shadow-2xl w-full max-w-lg mx-4 transform scale-95 transition-transform duration-300;
            }
            .announcement-modal.show .modal-content {
                @apply scale-100;
            }
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>

<body class="bg-gray-50 min-h-screen font-sans flex flex-col">
    <!-- 顶部导航栏（共用） -->
    <nav class="bg-white shadow-md z-30">
        <div class="container mx-auto px-4 flex justify-between h-16 items-center">
            <div class="flex items-center">
                <a href="/" class="flex items-center">
                    <i class="fa fa-clock-o text-primary text-2xl mr-2"></i>
                    <span class="font-bold text-xl text-gray-800">工时工具</span>
                </a>
                <div class="hidden md:ml-8 md:flex md:space-x-1">
                    <a href="/" class="nav-link active flex items-center">
                        <i class="fa fa-calculator mr-1"></i>工时利用率
                    </a>
                    <a href="/visualization" class="nav-link flex items-center">
                        <i class="fa fa-bar-chart mr-1"></i>数据可视化
                    </a>
                    <a href="/reports" class="nav-link flex items-center">
                        <i class="fa fa-file-text mr-1"></i>报表中心
                    </a>
                    <!-- 新增工具助手导航项 -->
                    <a href="/helper" class="nav-link flex items-center">
                        <i class="fa fa-magic mr-1"></i>工具助手
                    </a>
                    <a href="/settings" class="nav-link flex items-center">
                        <i class="fa fa-cog mr-1"></i>系统设置
                    </a>
                </div>
            </div>
            <!-- 公告滚动区域（红框位置） -->
            <div class="announcement-container md:w-2/5">
                <div class="announcement-scroll flex items-center" id="announcementContent">
                    <!-- 内容通过 JS 填充 -->
                </div>
            </div>
            <div class="flex items-center md:hidden">
                <button id="mobileMenuButton" class="text-gray-600 hover:text-primary">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- 移动端导航菜单（共用） -->
    <div id="mobileMenu" class="hidden md:hidden bg-white border-t border-gray-200 px-4 py-2">
        <div class="space-y-1 py-2">
            <a href="/" class="nav-link active block">
                <i class="fa fa-calculator mr-2"></i>工时利用率
            </a>
            <a href="/visualization" class="nav-link block">
                <i class="fa fa-bar-chart mr-2"></i>数据可视化
            </a>
            <a href="/reports" class="nav-link block">
                <i class="fa fa-file-text mr-2"></i>报表中心
            </a>
            <!-- 新增工具助手移动端导航项 -->
            <a href="/helper" class="nav-link block">
                <i class="fa fa-magic mr-2"></i>工具助手
            </a>
            <a href="/settings" class="nav-link block">
                <i class="fa fa-cog mr-2"></i>系统设置
            </a>
        </div>
    </div>

    <!-- 公告弹窗容器 -->
    <div class="announcement-modal" id="announcementModal">
        <div class="modal-content">
            <div class="p-6 border-b border-gray-100">
                <div class="flex justify-between items-center">
                    <h3 class="text-xl font-bold text-gray-800 flex items-center">
                        <i class="fa fa-bullhorn text-primary mr-2"></i>系统公告
                    </h3>
                    <button id="closeModal" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6" id="modalDetails">
                <!-- 详情内容通过 JS 填充 -->
            </div>
            <div class="p-4 bg-gray-50 rounded-b-xl text-center">
                <button id="confirmModal" class="btn-primary">
                    我知道了（点击后不在自动弹出）
                </button>
            </div>
        </div>
    </div>

    <!-- 页面内容区域（子页面自定义） -->
    <div class="container mx-auto px-4 py-8 max-w-6xl flex-grow pt-4">
        {% block content %}{% endblock %}
    </div>

    <!-- 页脚（共用） -->
    {% include 'footer.html' %}

    <script>
        // 移动端菜单切换
        document.getElementById('mobileMenuButton').addEventListener('click', function () {
            const mobileMenu = document.getElementById('mobileMenu');
            mobileMenu.classList.toggle('hidden');
        });

        // 导航栏激活状态管理
        document.addEventListener('DOMContentLoaded', function() {
            // 获取当前页面路径
            const currentPath = window.location.pathname;

            // 获取所有导航链接（包括桌面端和移动端）
            const navLinks = document.querySelectorAll('.nav-link');

            // 遍历链接并设置激活状态
            navLinks.forEach(link => {
                // 移除所有链接的active类
                link.classList.remove('active');

                // 为匹配当前路径的链接添加active类
                if (link.getAttribute('href') === currentPath) {
                    link.classList.add('active');
                }
            });
        });

        // 公告功能逻辑
        document.addEventListener('DOMContentLoaded', async () => {
            try {
                // 调用后端 /base 接口
                const response = await fetch('/base');
                if (!response.ok) {
                    throw new Error('获取公告数据失败');
                }
                const data = await response.json();

                const notice = data.notice_info;
                if (notice.show) {
                    // 生成公告唯一标识（使用版本号或日期）
                    const noticeId = notice.details[0]?.date || notice.content;

                    // 填充滚动公告内容
                    const announcementContent = document.getElementById('announcementContent');
                    announcementContent.innerHTML = `
                        <i class="fa fa-bullhorn announcement-icon"></i>
                        ${notice.content}
                    `;

                    // 显示公告弹窗的函数
                    const showAnnouncementModal = () => {
                        const modal = document.getElementById('announcementModal');
                        const modalDetails = document.getElementById('modalDetails');
                        const confirmBtn = document.getElementById('confirmModal');

                        // 填充弹窗详情
                        let detailsHtml = '';
                        notice.details.forEach(item => {
                            detailsHtml += `
                                <div class="border-l-4 border-${item.type} pl-4 py-2 mb-4">
                                    <h4 class="font-semibold">${item.title}</h4>
                                    <p class="text-gray-600 text-sm mt-1">${item.content}</p>
                                    <p class="text-gray-500 text-xs mt-1">发布时间: ${item.date}</p>
                                </div>
                            `;
                        });
                        modalDetails.innerHTML = detailsHtml;

                        // 检查用户是否已确认过此公告
                        const confirmedNotices = JSON.parse(localStorage.getItem('confirmedNotices') || '[]');
                        const hasConfirmed = confirmedNotices.includes(noticeId);

                        // 根据是否已确认设置按钮状态
                        if (hasConfirmed) {
                            // 已确认，按钮直接可用
                            confirmBtn.disabled = false;
                            confirmBtn.textContent = '我知道了（点击后不在自动弹出）';
                        } else {
                            // 未确认，启用10秒倒计时
                            let countdown = 10;
                            confirmBtn.disabled = true;
                            confirmBtn.textContent = `我知道了（${countdown}秒后可点击）`;

                            const timer = setInterval(() => {
                                countdown--;
                                confirmBtn.textContent = `我知道了（${countdown}秒后可点击）`;

                                if (countdown <= 0) {
                                    clearInterval(timer);
                                    confirmBtn.disabled = false;
                                    confirmBtn.textContent = '我知道了（点击后不在自动弹出）';
                                }
                            }, 1000);
                        }

                        // 显示弹窗
                        modal.classList.add('show');
                        document.body.style.overflow = 'hidden';
                    };

                    // 绑定公告点击事件（显示弹窗）
                    announcementContent.addEventListener('click', showAnnouncementModal);

                    // 检查用户是否已确认过此公告
                    const confirmedNotices = JSON.parse(localStorage.getItem('confirmedNotices') || '[]');
                    const hasConfirmed = confirmedNotices.includes(noticeId);

                    // 如果用户未确认过，则自动弹窗
                    if (!hasConfirmed) {
                        showAnnouncementModal();
                    }

                    // 绑定弹窗关闭事件
                    const closeModal = () => {
                        const modal = document.getElementById('announcementModal');
                        modal.classList.remove('show');
                        document.body.style.overflow = '';
                    };

                    document.getElementById('closeModal').addEventListener('click', closeModal);

                    // 点击"我知道了"按钮时，记录用户已确认
                    document.getElementById('confirmModal').addEventListener('click', () => {
                        // 保存已确认的公告ID
                        const updatedConfirmed = [...confirmedNotices, noticeId];
                        localStorage.setItem('confirmedNotices', JSON.stringify(updatedConfirmed));
                        closeModal();
                    });

                    document.getElementById('announcementModal').addEventListener('click', (e) => {
                        if (e.target === document.getElementById('announcementModal')) {
                            closeModal();
                        }
                    });
                } else {
                    // 不显示公告时隐藏滚动区域
                    document.querySelector('.announcement-container').style.display = 'none';
                }

                // 版本信息（可根据需求渲染到页脚等位置）
                const versionEle = document.querySelector('#version');
                if (versionEle) {
                    versionEle.textContent = data.version_info;
                }
            } catch (error) {
                console.error('公告加载失败:', error);
            }
        });
    </script>
    {% block extra_js %}{% endblock %}
</body>

</html>